<template>
  <div class="child-manage">
    <div class="block">
      <div class="edit-name">
        <p class="title">家长姓名</p>
        <input type="text" v-model="parent" placeholder="姓名">
      </div>
      <div class="flex">        
        <div class="edit-name">
          <p class="title">孩子姓名</p>
          <input type="text" v-model="truename" placeholder="姓名">
        </div>
        <div class="edit-name">
          <p class="title">孩子年龄</p>
          <input type="text" v-model="age" placeholder="年龄">
        </div>
      </div>
    </div>
    <span class="btn" @click="onsubmit()">提交</span>
    <toast v-model="is_toast" type="text" width="20em">{{toast_con}}</toast>
  </div>
</template>

<script>

  import {editchild,childinfo} from '@/api/api'
  import {Toast } from 'vux'
  export default {
    components: {
      Toast
    },
    data () {
      return {
        parent:'',
        truename:'',
        age:'',
        is_toast:false,
        toast_con:'默认'
      }
    },
    created () {
      this.id = this.$route.query.id
      this.uid = this.$route.query.uid
      if(this.id){
        this.child()
      }
    },
    methods: {
      router (path) {
        this.$router.push(path)
      },
      child(){
        childinfo(this.id,this.uid).then((res) =>{
          this.parent=res.data.info.parent
          this.truename=res.data.info.truename
          this.age=res.data.info.age
        }).catch((err) => {
          console.dir(err)
        })
      },
      onsubmit(){
        if(this.age=='' || this.truename=='' || this.parent==''){
          this.is_toast = !this.is_toast
          this.toast_con = '请填写信息'
          return
        }
        editchild(this.id,this.uid,this.truename,this.parent,this.age).then((res) =>{
          if(res.data.status==1){
            this.router({path:'childManage',query:{id:this.uid}})
          }else{
            this.is_toast = !this.is_toast
            this.toast_con=res.data.info
            return
          }
        }).catch((err) => {
          console.dir(err)
        })
      }
    }
  }
</script>

<style lang="stylus" scoped>
.child-manage
  min-height 100vh
  background-color #f5f5f5
  .block
    padding 0 1.5rem
    background-color #fff
    .edit-name
      border-bottom 1px solid #e6e6e6
      .title
        color #152D6F
        font-size 1.1rem
        padding-top 1.5rem
      input
        color #333
        font-size 1.7rem
        line-height 5rem
        width 100%
        outline none
  .flex
    display flex
    margin-bottom 3rem
    .edit-name
      flex 1
      border-bottom none
  .btn
    display block
    height 5rem
    line-height 5rem
    color #fff
    border-radius 100px
    background-color #172F6D
    font-size 1.7rem
    text-align center
    width 92%
    font-weight 500
    margin-left 4%
</style>
